<template>
	<div>
		<h1>登录系统</h1>
		<font color="red">{{msg}}</font><br />
		<table border="1" width="50%" align="center">
			<tr>
				<td>用户名</td>
				<td>
					<input type="text" v-model="user.uname"/>
				</td>
			</tr>
			<tr>
				<td>密码</td>
				<td>
					<input type="password" v-model="user.pass"/>
				</td>
			</tr>
			<tr>
				<td colspan="2" align="center">
					<button @click="doLogin()">登录</button>
				</td>
			</tr>
		</table>
	</div>
</template>

<script>
	export default{
		name:'Login',
		data(){
			return{
				user:{
				    uname:'tom',
				    pass:'123',
					act:'login'
					},
				msg:''
					}
				},
		methods:{
			doLogin(){
				// let url='/LoginController';
				let url='/login';
				let param=this.$qs.stringify(this.user);
				this.$axios.post(url,param)
				.then((resp)=>{
					let u =resp.data
					if(u){
						//把当前用户信息保存到本地
						localStorage.setItem('login_user',JSON.stringify(u))
						//登陆成功,跳转到主页
						this.$router.push('/Index');
					}else{
						this.msg='登录失败。请重新登陆'
					}
				})
				.catch((err)=>{
					console.log('error=',err);
				})
			}
		}
	}
</script>
<!-- scoped="scoped"表示当前样式属于局部样式，只在当前组件中有效-->
<style scoped="scoped">
	div{
		width: 100%;
		margin: 0 auto;
		text-align: center;
		margin-top: 10%;
	}
</style>
